import React, { Component } from 'react';
import {
    View,
    StyleSheet,
} from 'react-native';
import { Calendar } from 'iftide';

export default class Demo2 extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.onDayPress = this.onDayPress.bind(this);
    }

    render() {
        return (
            <View style={styles.container}>
                <Calendar
                    theme={{
                        backgroundColor: '#ffffff',
                        calendarBackground: '#ffffff',
                        textSectionTitleColor: '#b6c1cd',
                        selectedDayBackgroundColor: '#d00f20',
                        selectedDayTextColor: '#ffffff',
                        todayTextColor: 'orange',
                        dayTextColor: '#2d4150',
                        weekendsTextColor: '#d00f20',
                        textDisabledColor: '#d9e1e8',
                        monthTextColor: '#2d4150'
                    }}
                    hideViewToggle={true}
                    weekendsObv={true}
                    markedDates={{ [this.state.selected]: { selected: true } }}
                    current={this.state.selected}
                    onDayPress={this.onDayPress}
                    minDate={'2018-01-30'}
                    maxDate={'2030-09-30'}
                />
            </View>
        );
    }

    onDayPress(day) {
        this.setState({
            selected: day.dateString
        });
    }
}

const styles = StyleSheet.create({
    calendar: {
        borderTopWidth: 1,
        paddingTop: 5,
        borderBottomWidth: 1,
        borderColor: '#eee',
        height: 350,
    },
    text: {
        textAlign: 'center',
        borderColor: '#bbb',
        padding: 10,
        backgroundColor: '#eee'
    },
    container: {
        flex: 1,
        backgroundColor: 'gray'
    }
});